<template>
  <div class="user">
    <div class="user-top">
      <nav class="user-nav" @click="goto('setting')">
        <!-- <van-icon name="setting-o" /> -->
        <!-- <van-icon name="chat-o" /> -->
      </nav>
      <div class="user-avatar">
        <img :src="avatar" alt />
        <p>{{nick_name}}</p>
      </div>
    </div>
    <div class="user-content">
      <div class="user-order">
        <div class="order-header" @click="toOrder(0)">
          <h5>我的订单</h5>
          <span>查看全部订单&nbsp;></span>
        </div>
        <ul class="order-content">
          <li @click="toOrder(1)">
            <a>
              <van-icon name="pending-payment" />
              <p>待付款</p>
            </a>
          </li>
          <li @click="toOrder(2)">
            <a>
              <van-icon name="logistics" />
              <p>待发货</p>
            </a>
          </li>
          <li @click="toOrder(3)">
            <a>
              <van-icon name="gift-o" />
              <p>待收货</p>
            </a>
          </li>
          <li @click="toOrder(4)">
            <a>
              <van-icon name="flower-o" />
              <p>待评价</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="user-address">
        <van-cell title="我的收藏" icon="star-o" is-link to="/collection" />
        <van-cell title="地址管理" icon="location-o" is-link to="/useraddress" />
        <van-cell title="联系客服" icon="service-o" is-link :value="kefu" @click="call" />
        <!-- <van-cell title="帮助与反馈" icon="question-o" is-link to="/help" /> -->
        <van-cell title="关于我们" icon="info-o" is-link to="/about" />
        <!-- <van-cell title="退出登录" icon="close" is-link /> -->
      </div>
    </div>
  </div>
</template>
<script>
const avatar = require("@/assets/logo.png");
import { Cell, CellGroup } from "vant";
import api from "@/utils/api";
export default {
  name: "user",
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  data() {
    return {
      nick_name: "",
      avatar: "",
      kefu: ""
    };
  },
  mounted() {
    this.getMe();
  },
  methods: {
    getMe() {
      this.$axios({
        method: "get",
        url: api.me,
        params: {
          token: localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res);
        this.nick_name = res.nick_name;
        this.avatar = res.avatar;
        this.kefu = res.kefu;
      });
    },
    goto(name) {
      this.$router.push({ path: name });
    },
    call() {
      window.location.href = "tel://400-820-8820";
    },
    toOrder(state) {
      sessionStorage.setItem("state", String(state));
      this.$router.push({ name: "order", params: { state: String(state) } });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~style/user.less";
</style>
